<template>
  <div>
      <h1>test-setup</h1>
      <button @click="handleClick">点击</button>
  </div>
</template>

<script>
import { defineComponent } from "@vue/runtime-core";
import { toRefs,toRef } from "vue";

export default defineComponent({
    props: {
        title: String,
        message: String,
    },
    setup(props,{ attrs, slots, emit}) {
        console.log("--- setup ---");
        //失去了响应式
        const { message } = props;
        console.log("message",message); //北京欢迎你

        const { title } = toRefs(props);
        console.log("title",title); //ObjectRefImpl {_object: Proxy, _key: 'title', __v_isRef: true}

        console.log("props",props);
        console.log("props.title",props.title);
        const otherMessage = toRef(props,"otherMessage");
        console.log("otherMessage",otherMessage.value);


        //console.log("context",context);
        console.log("attrs",attrs);
        console.log("slots",slots);
        console.log("emit",emit);
    },
    methods: {
        handleClick() {
            console.log("handleClick");
        }
    }
})
</script>

<style>

</style>